<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script>
        window.onload = function () {
            layui.use('element', function () {
                var element = layui.element;
                var $ = layui.jquery;

                //一些事件监听
                element.on('tab(demo)', function (data) {
                    console.log(this); //当前Tab标题所在的原始DOM元素
                    console.log(data.index); //得到当前Tab的所在下标
                    console.log(data.elem); //得到当前的Tab大容器
                });
                var value = '50%';
                element.progress('demo', value);
                $('[lay-filter="demo"] div').attr("lay-percent", value);
            });
            // 颜色选择器文档 - layui.colorpicker
            layui.use('colorpicker', function () {
                var colorpicker = layui.colorpicker;
                //渲染
                colorpicker.render({
                    elem: '#test1'  //绑定元素
                    , color: "red"
                    , format: "rgb"
                    , predefine: true
                    , colors: ['#F00', '#0F0', '#00F', 'rgb(255, 69, 0)', 'rgba(255, 69, 0, 0.5)']
                    , change: function (color) {
                        console.log(color)
                    }
                    , done: function (color) {
                        console.log(color)
                        //譬如你可以在回调中把得到的 color 赋值给表单
                    }
                });
            });
            // 滑块文档 - layui.slider
            layui.use('slider', function () {
                var slider = layui.slider;

                //渲染
                slider.render({
                    elem: '#slideTest1'  //绑定元素
                    , type: 'default'
                    , input: true
                    , value: 33
                    , step: 2
                    , showstep: true
                    , tips: true
                    , theme: "orange"
                    , setTips: function (value) { //自定义提示文本
                        return value + '公斤';
                    }
                    , change: function (value) {
                        console.log(value) //动态获取滑块数值
                        //do something
                    }
                });
            });

            //评分组件文档 - layui.rate
            layui.use('rate', function () {
                var rate = layui.rate;

                //渲染
                var ins1 = rate.render({
                    elem: '#rateTest1'  //绑定元素
                    , half: true
                    // ,readonly:true
                    , text: true
                    , setText: function (value) {
                        var arrs = {
                            '1': '极差'
                            , '2': '差'
                            , '3': '中等'
                            , '4': '好'
                        };
                        this.span.text(arrs[value] || (value + "星"));
                    }
                    , choose: function (value) {
                        if (value >= 4) alert('么么哒')
                    }
                });
            });

            // 通用轮播组件文档 - layui.carousel
            layui.use('carousel', function () {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#carouselTest1'
                    , width: '100%' //设置容器宽度
                    , arrow: 'always' //始终显示箭头
                    , height: "500px"
                    , anim: 'fade' //切换动画方式
                    , interval: 800
                    , arrow: "hover"
                });
                //监听轮播切换事件
                carousel.on('change(carouselTest2)', function (obj) { //carouselTest2来源于对应HTML容器的 lay-filter="carouselTest2" 属性值
                    console.log(obj.index); //当前条目的索引
                    console.log(obj.prevIndex); //上一个条目的索引
                    console.log(obj.item); //当前条目的元素对象
                })
                ;
            });

            // 流加载文档 - layui.flow
            layui.use('flow', function () {
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
                flow.lazyimg();
                flow.load({
                    elem: '#flowDemo' //指定列表容器
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                        $.get('getSpecList?limit=10&page=' + page, function (res) {
                            //假设你的列表返回在data集合中
                            layui.each(res.data, function (index, item) {
                                lis.push('<li style="color: black;">规格skuId为: ' + item.skuId + '</li>');
                            });

                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < res.pages);
                        });
                    }
                });
            });

            // 工具集文档 - layui.util
            layui.use('util', function () {
                var util = layui.util;

                //执行
                util.fixbar({
                    bar1: true
                    , click: function (type) {
                        console.log(type);
                        if (type === 'bar1') {
                            alert('点击了bar1')
                        }
                    }
                });
            });

            //倒计时模块
            layui.use('util', function () {
                var util = layui.util;

                //示例
                var endTime = new Date(2099, 1, 1).getTime()    //假设为结束日期
                    , serverTime = new Date().getTime();        //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

                util.countdown(endTime, serverTime, function (date, serverTime, timer) {
                    var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
                    layui.$('#timerTest').html('距离2099年1月1日还有：' + str);
                });
            });

            // 代码修饰器文档 - layui.code
            layui.use('code', function () { //加载code模块
                layui.code({
                    title: 'JavaScript'
                    , encode: true      //是否转义html标签。默认不开启
                    , skin: 'notepad'   //如果要默认风格，不用设定该key。
                    , about: false      //如果你不喜欢出现右上角的layui.code字眼，你是可以剔除的
                }); //引用code方法
            });
        }
    </script>
</head>
<body>
<div>
    <div class="layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
        </div>
    </div>
    <hr>
    <div>
        <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
            <div class="layui-progress-bar" lay-percent="2%" lay-showPercent="yes"></div>
        </div>
    </div>
    <hr>
    <div id="test1"></div>
    <hr>
    <div id="slideTest1"></div>
    <hr>
    <div id="rateTest1"></div>
    <hr>
    <%--<div class="layui-carousel" id="carouselTest1" lay-filter="carouselTest2">--%>
    <%--<div carousel-item>--%>
    <%--<img src="/images/152447657894.jpg">--%>
    <%--<img src="/images/1524476512805.jpg">--%>
    <%--<img src="/images/1524476565699.jpg">--%>
    <%--<img src="/images/1524476572699.jpg">--%>
    <%--</div>--%>
    <%--</div>--%>
    <hr>
    <div>
        <ul id="flowDemo">
        </ul>
        <%--<img lay-src="/images/152447657894.jpg">--%>
        <%--<img src="/images/1524476512805.jpg" alt="該图不会懒加载">--%>
        <%--<img lay-src="/images/1524476565699.jpg">--%>
    </div>
    <hr>
    <div>
        <div id="timerTest"></div>
    </div>

    <div>
        <pre class="layui-code">
        <ul>
          <li>HTML将不会被解析</li>
          <li>有木有感觉非常方便</li>
        </ul>
        //代码区域
        var a = 'hello layui';
</pre>
    </div>
</div>
</body>
</html>
